<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- form表单提交数据的载体 -->
    <form action="">
      <!-- 表单元素, 都应该有 name 属性.readonly disabled -->
      <input type="text" name="text" required value="123" />
      <input type="password" name="pass" placeholder="请输入密码" />
      <!-- 单选按钮，一组只能选中一个. 根据name属性分组-->
      <input type="radio" name="gender" value="男" />男
      <input type="radio" name="gender" checked value="女" />女

      <!-- 复选框，一组可以选中多个. 根据name属性分组-->
      <input type="checkbox" name="hobby" value="篮球" checked />篮球
      <input type="checkbox" name="hobby" value="足球" />足球
      <input type="checkbox" name="hobby" value="乒乓球" />乒乓球

      <!-- 下拉列表 -->
      <select name="city">
        <option value="提交的值">显示的文字</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
      </select>
      <hr />
      <input type="search" name="search" list="city-data" />
      <datalist id="city-data">
        <option>显示的文字</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
      </datalist>

      <textarea name="content" id="" cols="30" rows="10">anion</textarea>

      <!-- 提交-->
      <input type="submit" value="提交" />
      <button type="submit">提交</button>

      <input type="range" name="range" min="0" max="100" step="10" value="50" />
      <input type="date" name="date" id="" />
      <input type="datetime-local" name="datetime" id="" />

      <!-- 重置, 不等于清空 -->
      <input type="reset" value="重置" />
      <button type="reset">重置</button>
    </form>
  </body>
</html>
